<template>
  <div>
    <!-- 单选题 -->
    <div v-if="detail.name === '单选'">
      <div
        v-for="(item, index) in detail.arr"
        :key="index"
        @click="headleSave(item, index)"
        class="con_odd"
        :class="{ active: detail.value == index }"
      >
        <p>{{ item.value }}、{{ item.name }}</p>
      </div>
    </div>

    <!-- 多选题 -->
    <div v-if="detail.name === '多选'">
      <div
        v-for="(item, index) in detail.arr"
        :key="index"
        class="con_odd"
        @click="headleMultiple(item)"
        :class="{ active: item.checked }"
      >
        <p>{{ item.value }}、{{ item.name }}</p>
      </div>
    </div>

    <!-- 填空题 -->
    <div v-if="detail.name === '填空'">
      <div>
        <div class="gap_one" v-for="(item, index) in detail.arr" :key="index">
          <p>{{ item.title }}</p>
          <div class="head_gap">
            <input
              :class="item1.value ? (item1.isYes ? 'isYes' : 'isError') : ''"
              maxlength="1"
              v-model="item1.value"
              v-for="(item1, index1) in item.values"
              :key="index1"
              type="text"
            />
          </div>
        </div>
      </div>
      <div class="gap_result" v-if="detail.ischecked">
        正确答案：
        <div v-for="(item, index) in detail.answer" :key="index">
          <span>{{ item.join("") }}</span>
        </div>
      </div>
    </div>

    <button @click="headleNext">下一题</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      mulList: [
        {
          name: "单选",
          value: null,
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          name: "多选",
          value: null,
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
        },
        {
          name: "单选",
          value: null,
          arr: [
            { name: "退款金额", value: "A" },
            { name: "用户满意度", value: "B" },
            { name: "故障修复报告", value: "C" },
            { name: "回访用户时间", value: "D" },
          ],
        },
        {
          name: "多选",
          value: null,
          arr: [
            { name: "退款金额", value: "A", checked: false },
            { name: "用户满意度", value: "B", checked: false },
            { name: "故障修复报告", value: "C", checked: false },
            { name: "回访用户时间", value: "D", checked: false },
            { name: "用户意见反馈", value: "E", checked: false },
          ],
        },
        {
          name: "填空",
          ischecked: false,
          answer: [
            [1, 2, 3, 4],
            [6, 7, 8, 9],
          ],
          arr: [
            {
              title: "填空一",
              values: [
                { value: "1", isYes: false },
                { value: "2", isYes: false },
                { value: "3", isYes: false },
                { value: "5", isYes: false },
              ],
            },
            {
              title: "填空二",
              values: [
                { value: "6", isYes: false },
                { value: "8", isYes: false },
                { value: "7", isYes: false },
                { value: "9", isYes: false },
              ],
            },
          ],
        },
      ],
    };
  },

  computed: {
    detail() {
      return this.mulList[this.activeIndex];
    },
  },

  methods: {
    // 单选题
    headleSave(item, index) {
      //如果点击时的值等于 data的值 data的值等于空 否则data值等于点击时的值
      // if (item.value === this.detail.value) {
      //    this.detail.value = null;
      // } else {
      //   this.detail.value = item.value;
      // }

      if (this.detail.value === index) {
        this.detail.value = null;
      } else {
        this.detail.value = index;
      }
    },

    //多选题 当前点击的checked取反
    headleMultiple(item) {
      item.checked = !item.checked;
    },

    //填空题 点击下一步
    headleNext() {
      this.activeIndex += 1;
    },
  },
};
</script>
<style lang="less" scoped>
.con_odd {
  color: #333;
  border: 0.0625rem solid #979797;
  border-radius: 0.3125rem;
  margin-bottom: 1.25rem;
  height: 3.125rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
}
.active {
  color: #fff;
  background-color: #f1727c;
  border: 0;
}
.gap_one {
  margin-bottom: 1.75rem;

  p {
    margin-bottom: 0.5625rem;
  }

  .head_gap {
    input {
      width: 2.1875rem;
      height: 2.1875rem;
      outline: 0;
      border-radius: 0.3125rem;
      border: 1px solid #979797;
      font-size: 1.125rem;
      text-align: center;
      line-height: 2.1875rem;
      margin-right: 0.5625rem;
    }
  }
  .gap_result {
    background: #f2f2f7;
    display: flex;
    padding: 0.4375rem 0.5625rem;
    border-radius: 0.3125rem;

    div:not(:first-child) {
      margin-left: 2.5rem;
    }

    span {
      color: #0b8b33;
    }
  }
}
.isYes {
  color: #00862a;
  border: 1px solid #00862a !important;
  position: relative;
}
.isError {
  border: 1px solid #d81e06 !important;
  color: red;
  position: relative;
}
</style>
